<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      :columns="columns"
      :form-items="formItems"
      @get-table-data="getTableData"
    >
      <template #handle="{row}">
        <el-button type="text" size="small" @click="showDetail(row)">详情</el-button>
      </template>
    </pf-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { GAS_ORDER_STATUS } from '@/utils/enum'
import { getGasOrderList } from '@/api/order'

export default {
  name: 'OrderList',
  data() {
    return {
      orderStatusOptions: GAS_ORDER_STATUS,
      form: {},
      loading: false
    }
  },
  computed: {
    ...mapGetters([
      'currentEnterprise',
      'currentSite'
    ]),
    columns() {
      const attrs = { 'min-width': '100px' }
      return [
        { label: '订单编号', prop: 'orderId', attrs: { width: '180px' }},
        { label: '订单内容', prop: 'orderName', attrs },
        { label: '地址', prop: 'allReceiverAddress', attrs: { width: '180px' }},
        { label: '订单总价', prop: 'retailAfterCouponAmount', formatter: 'money', attrs },
        { label: '下单时间', prop: 'createTime', attrs: { width: '150px' }},
        { label: '付款方式', prop: 'paymentMethod', attrs },
        { label: '付款流水号', prop: 'thirdNumber', attrs: { width: '180px' }},
        { label: '顾客联系方式', prop: 'playManPhone', attrs },
        { label: '推送状态', prop: 'rtCodeStr', attrs },
        { label: '作废订单状态', prop: 'cancelRtCodeStr', attrs },
        { label: '状态', prop: 'payStatusStr', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '100px', fixed: 'right' }}
      ]
    },
    formItems() {
      return [
        {
          type: 'select',
          label: '订单状态',
          prop: 'payStatus',
          options: this.orderStatusOptions
        }, {
          type: 'input',
          label: '订单编号',
          prop: 'orderId'
        }, {
          type: 'date',
          label: '产生时间',
          prop: 'dateRange',
          span: 8,
          attrs: {
            type: 'datetimerange'
          }
        }
      ]
    }
  },

  methods: {

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      const [createStartTime = '', createEndTime = ''] = formQuery?.dateRange || []
      const data = {
        pageNo,
        pageSize,
        createStartTime,
        createEndTime,
        siteId: this.currentSite.id,
        ...formQuery
      }
      getGasOrderList(data).then(res => {
        this.loading = false
        done({ data: res.data || [], total: res.count || 0 })
      }).catch(() => {
        done({ data: [], total: 0 })
        this.loading = false
      })
    },

    // 详情
    showDetail(row) {
      this.$router.push({
        path: '/gas/order/detail',
        query: {
          orderId: row.orderId
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
